<script setup lang="ts">
import {ref} from "vue";
import $kt from "/src/components/kantboot";
import { ElNotification } from 'element-plus'
import router from "../../router";


let requestParam = ref({
  username: "",
  password: "",
});

let loginLoading = ref(false);

let login = async () =>{
  await validate();

  // loginLoading.value = true;
  // let requestJson = {
  //   username: requestParam.value.username,
  //   password: requestParam.value.password,
  // };
  // await $kt.rsa.kantbootEncryptByServer(requestParam.value.username).then((res) => {
  //   requestJson.username = res;
  // }).catch((err) => {
  //   loginLoading.value = false;
  // });
  //
  // await $kt.rsa.kantbootEncryptByServer(requestParam.value.password).then((res) => {
  //   requestJson.password = res;
  // }).catch((err:any) => {
  //   loginLoading.value = false;
  // });

  $kt.request.request({
    // url: "/system-user-web/login/loginWithSecurity",
    url: "/system-user-web/login/login",
    method: "post",
    // data: requestJson,
    data: requestParam.value,
    stateSuccess: (res:any) => {
      loginLoading.value = false;
      ElNotification({
        title: res.msg,
        type: 'success'
      });
      $kt.request.setToken(res.data.token);
      setTimeout(()=>{
        // 使用路由跳转，并且刷新页面
        router.push({name: "manage"}).then(()=>{
          setTimeout(()=>{
            window.location.reload();
          },200);
        });
      },1000);
    },
    stateFail: (err:any) => {
      ElNotification({
        title: err.errMsg,
        type: 'error'
      });
      loginLoading.value = false;
    }
  })
}


let list = ref(["多语言","权限管理","系统设置","系统日志","系统监控","系统工具","系统管理"]);

// 表单规则
let rules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 6, message: '用户名不能少于6位', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码不能少于6位', trigger: 'blur' }
  ],
});

let ruleFormRef = ref();

// 表单验证
let validate = () => {
  return new Promise((resolve, reject) => {
    ruleFormRef.value.validate((valid) => {
      if (valid) {
        resolve(true);
      } else {
        reject(false);
      }
    });
  });
};

</script>

<template>
  <div class="box">
    <div class="in-box">

      <div class="logo-box">
        <img class="logo" src="/src/assets/logo.png" alt="logo"/>
      </div>
      <div style="height: 10px"></div>
      <div class="title">
        莲花心泉管理后台登录
      </div>
      <div style="height: 10px"></div>
      <div class="form-box">
        <el-form
            ref="ruleFormRef"
            label-position="top" :rules="rules" :model="requestParam">
          <el-form-item
              prop="username"
              label="用户名">
            <el-input
                :disabled="loginLoading"
                @keyup.enter.native="login()"
                v-model="requestParam.username"></el-input>
          </el-form-item>
          <el-form-item
              prop="password"
              label="密码">
            <el-input
                :disabled="loginLoading"
                type="password"
                @keyup.enter.native="login()"
                v-model="requestParam.password"></el-input>
          </el-form-item>
        </el-form>
        <div style="height: 10px"></div>
        <el-button
            :loading="loginLoading"
            text
            bg
            @click="login()"
            style="width: 100%;
          font-weight: bold;
          padding: 20px;"
            type="info"
        >登录
        </el-button>
      </div>
      <marquee
          behavior="scroll" direction="right" scrollamount="10" scrolldelay="0" loop="-1" width="100%">
      <span
          v-for="item in list"
          :style="{
          'margin':'15px',
        }"
          class="domain">{{ item }}</span>
      </marquee>

    </div>
  </div>

  <div style="position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background-color: #000;
">

    <img
        class="iframe"
        src="https://kantboot-website.oss-cn-beijing.aliyuncs.com/assets/back2.png"
         />



  </div>


  <div
      v-if="false"
  style="background-color: rgba(255,255,255,.6);
position: fixed;
bottom: 0;
left: 0;
font-size: 10px;
padding: 10px;
border-radius: 0 20px 0 0;
text-align: center;
color:#666;
"

  >
    <div>
      后台基础模板由<span
        onclick="window.open('https://www.kantboot.com')"
        style="padding: 0 5px 0 5px;font-weight: bold;
      cursor: pointer;
">不一网络科技社</span>提供
    </div>
    <div style="height: 5px"></div>
    <div>
      <div>请遵循开源协议，告知用户所用模板来源</div>
    </div>
  </div>

</template>

<style scoped>
.box {
  position: fixed;
  width: 400px;
  padding: 30px;
  box-sizing: border-box;
  background-color: #ffffff;
  right: 0;
  top: 0;
  height: 100%;
}

.in-box{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo-box {
  text-align: center;
}

.form-box {
  padding: 20px;
}

.logo {
  width: 80px;
  height: 80px;
  border-radius: 20px;
}

@keyframes logo {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.title {
  text-align: center;
  font-weight: lighter;
  font-size: 20px;
}

.domain {
  font-size: 12px;
  text-align: center;
  display: inline-block;
  background-color: rgba(0, 0, 0, .1);
  color: #ffffff;
  padding: 10px;
  border-radius: 30px;
  cursor: pointer;
}

.domain:hover {
  background-color: rgba(0, 0, 0, .8);
}

.iframe{
  width: calc(100% - 360px);
  height: 100%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  /* 高斯模糊 */
  filter: blur(10px);
  object-fit: cover;
  /* 动画 */
  animation: iimg 5s infinite;
}

@keyframes iimg {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}




</style>